<template>
  <view>
    <view class="content">
      <view class="lists" v-for="(item, i) in addreslist" :key="i">
        <view @click="linkadrees(item.id)">
          <view class="top">
            <text>收货人：{{ item.name }} </text>
            <text>{{ item.phone }}</text>
          </view>
          <view class="cen">
            收货地址：{{
              item.province_name +
              item.city_name +
              item.area_name +
              item.address_detail
            }}
          </view>
        </view>
        <view class="bot">
          <view
            :class="['lef', item.address_is_default == '1' ? 'active' : '']"
            @click="setdefalt(item.id)"
          >
            <image
              v-if="item.address_is_default == 0"
              class="img"
              src="https://www.123qifu.com/onlineimages/static/rido.png"
              mode=""
            />
            <image v-else class="img" src="https://www.123qifu.com/onlineimages/static/ridos.png" mode="" />
            设为默认地址
          </view>
          <view class="rig">
            <view class="span" @click="editAdrees(item.id)">
              <image class="img" src="https://www.123qifu.com/onlineimages/static/Shopping/edit.png" mode="" />
              编辑
            </view>
            <view class="span" @click="popupOpen(item.id)">
              <image
                class="img"
                src="https://www.123qifu.com/onlineimages/static/Shopping/delet.png"
                mode=""
              />
              删除
            </view>
          </view>
        </view>
      </view>
      <view class="btns" @click="addAdrees">
        <image class="img" src="https://www.123qifu.com/onlineimages/static/Shopping/addDress1.png" mode="" />
      </view>
    </view>
    <!-- 删除地址弹窗 -->
    <uni-popup ref="popup" type="center">
      <view class="popCenter">
        <view class="title">温馨提示</view>
        <text style="padding: 40rpx 0">您确定要删除该收货地址吗？？</text>
        <view class="popBtn">
          <text class="cancel" @click="showClcik">取消</text>
          <text
            class="cancel"
            @click="deletAddress"
            style="border: 0; color: #c52b2e"
            >确定</text
          >
        </view>
      </view>
    </uni-popup>
  </view>
</template>

<script>
export default {
  data() {
    return {
      page: "1", // 页码
      pageSize: "10", // 每页条数
      addreslist: [],
      total: "",
      last_page: "",
      id: "",
      check: "",
    };
  },
  onLoad(params) {
    this.check = params.check;
  },
  onShow() {
    this.getAddress();
  },
  onReachBottom() {
    if (this.total / 10 <= this.last_page && this.total > 10) {
      this.loadMore();
    }
  },
  methods: {
    // 选择收货地址
    linkadrees(id) {
      if (this.check) {
        uni.navigateTo({
          url: "./Confirmorder?id=" + id,
        });
      }
    },
    // 获取收货地址列表
    async getAddress() {
      const res = await this.$myRequest({
        url: "address/getGoodsAddress",
        method: "POST",
        data: {
          page: this.page, // 页码
          pageSize: this.pageSize, // 每页条数
          type: "",
        },
      });
      this.addreslist = res.data.msg.data;
      this.total = res.data.msg.total;
      this.last_page = res.data.msg.last_page;
    },
    // 获取收货地址下一页列表
    async loadMore() {
      const res = await this.$myRequest({
        url: "address/getGoodsAddress",
        method: "POST",
        data: {
          page: this.page++, // 页码
          pageSize: this.pageSize, // 每页条数
          type: "",
        },
      });
      this.addreslist = this.addreslist.concat(res.data.msg.data);
      this.total = res.data.msg.total;
      this.last_page = res.data.msg.last_page;
    },
    // 设置默认地址
    async setdefalt(i) {
      const res = await this.$myRequest({
        url: "address/setDefaultGoodsAddress",
        method: "POST",
        data: {
          id: i,
        },
      });
      if (res.data.code == 1) {
        this.getAddress();
      }
    },
    popupOpen(i) {
      this.id = i;
      this.$refs.popup.open();
    },
    // 删除地址
    async deletAddress() {
      const res = await this.$myRequest({
        url: "address/delGoodsAddress",
        method: "POST",
        data: {
          id: this.id,
        },
      });
      if (res.data.code == 1) {
        uni.showToast({
          title: res.data.data,
          icon: "none",
        });
        this.getAddress();
        this.showClcik();
      }
    },
    // 取消删除
    showClcik() {
      this.$refs.popup.close();
    },
    // 编辑收货地址
    editAdrees(i) {
      uni.navigateTo({
        url: "./Receaddress?id=" + i,
      });
    },
    // 添加收货地址
    addAdrees() {
      uni.navigateTo({
        url: "./Receaddress",
      });
    },
  },
};
</script>

<style lang="scss">
page {
  width: 100%;
  height: auto;
  background: #f4f4f4;
}
.content {
  border-top: 20rpx solid #f4f4f4;
  overflow: hidden;
  .lists {
    width: 100%;
    min-height: 200rpx;
    background: #fff;
    margin: 0 auto 20rpx;
    box-sizing: border-box;
    padding: 30rpx;
    .top {
      width: 100%;
      display: flex;
      align-items: center;
      justify-content: space-between;
      margin-bottom: 15rpx;
      text {
        display: block;
        font-size: 30rpx;
        font-weight: bold;
        color: #333333;
      }
    }
    .cen {
      font-size: 26rpx;
      color: #999999;
      padding-bottom: 25rpx;
      border-bottom: 1px solid #eee;
    }
    .bot {
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding-top: 20rpx;
      .lef {
        display: flex;
        align-items: center;
        font-size: 26rpx;
        color: #333333;
        &.active {
          color: #333;
        }
        .img {
          display: block;
          width: 34rpx;
          height: 34rpx;
          margin-right: 17rpx;
        }
      }
      .rig {
        display: flex;
        align-items: center;
        .span {
          display: flex;
          align-items: center;
          font-size: 26rpx;
          color: #333333;
          margin-left: 40rpx;
          .img {
            display: block;
            width: 28rpx;
            height: 28rpx;
            margin-right: 10rpx;
          }
        }
      }
    }
  }
  .btns {
    width: 430rpx;
    height: 80rpx;
    margin: 50rpx auto;
    .img {
      display: block;
      width: 100%;
      height: 100%;
    }
  }
}
.popCenter {
  display: flex;
  align-items: center;
  flex-direction: column;
  width: 546rpx;
  padding: 40rpx 0 0;
  background-color: #fff;
  font-size: 30rpx;
  color: #333333;
  border-radius: 10rpx;
  .title {
    font-size: 30rpx;
    font-weight: 550;
    color: #373737;
  }
  .popBtn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100rpx;
    border-top: 1rpx solid #eee;
    border-radius: 0 0 10rpx 10rpx;

    .cancel {
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 28rpx;
      color: #373737;
      width: 50%;
      height: 100%;
      border-right: 1rpx solid #eee;
      letter-spacing: 2rpx;
    }
  }
}
</style>
